<script setup>
// shallowRef 是 Vue 3 提供的一个响应式 API，用于创建一个浅层的响应式引用。
// 与 ref 不同，shallowRef 只会跟踪对引用本身的更改，而不会深层跟踪引用值的更改。
// 这在处理大型对象或数组时可以提高性能，因为它不会递归地将对象的每个属性都转换为响应式。
import { shallowRef } from 'vue'
import CompA from "@/components/6BuildInComp/3KeepAlive/ComA.vue"
import CompB from "@/components/6BuildInComp/3KeepAlive/ComB.vue"
import CompC from "@/components/6BuildInComp/3KeepAlive/ComC.vue"

const current = shallowRef(CompA)

console.log("current")
console.log(current)

function btnclick() {
   
    current.value = CompC
}

</script>

<template>
    <div class="demo">
        <button @click="btnclick">切换到C</button>
        <label><input type="radio" v-model="current" :value="CompA" /> A</label>
        <label><input type="radio" v-model="current" :value="CompB" /> B</label>
        <label><input type="radio" v-model="current" :value="CompC" /> C</label>
        <!-- 非活跃的组件将会被缓存！ -->
        <KeepAlive :max="2">
            <component :is="current"></component>
        </KeepAlive>
    </div>
</template>
